<template>
	<div class="container">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="我的申请" name="first"></el-tab-pane>
			<el-tab-pane label="我的授权" name="second"></el-tab-pane>
		</el-tabs>
		<el-row>
			<el-form :inline="true" :model="listQuery" ref="searchForm" class="demo-form-inline">
				<el-col :span="18">
					<el-form-item label="机构名称" prop="hospital_name">
						<el-input placeholder="请输入机构名称" v-model="listQuery.hospital_name" autofocus clearable></el-input>
					</el-form-item>
					<el-form-item prop="status" label="状态">
						<el-select placeholder="全部" v-model="listQuery.status" clearable>
							<el-option label="已申请" value="3"></el-option>
							<el-option label="已通过" value="2"></el-option>
							<el-option label="已拒绝" value="1"></el-option>
							<el-option label="已解约" value="1"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6" class="tr">
					<el-form-item>
						<el-button type="primary" @click="handleRefresh">查询</el-button>
						<el-button type="primary" @click="handleReset('searchForm')">重置</el-button>
						<el-button type="primary" v-if="activeName === 'first'" @click="dialogFormVisibleUpdate = true">
							<span class="iconfont">&#xe676;</span>
							申请数据访问
						</el-button>
					</el-form-item>
				</el-col>
			</el-form>
		</el-row>
		<!-- 搜索 -->

		<my-table :table-data="tableData" :col-configs="colConfigs" :list-loading="listLoading" :total="total"
			:page-size="listQuery.pagesize" @refreshList="getList">
			<el-table-column label="操作" slot="opt">
				<template slot-scope="{row}">
					<span v-if="row.status === 0">todo</span>
					<span v-if="row.status === 1">todo</span>
					<span v-if="row.status === 2">todo</span>
				</template>
			</el-table-column>
			<el-table-column label="状态" slot="status">
				<template slot-scope="{row}">
					<span v-if="row.status === 0">已申请</span>
					<span v-if="row.status === 1">已通过</span>
					<span v-if="row.status === 2">已拒绝</span>
					<span v-if="row.status === 3">已解约</span>
				</template>
			</el-table-column>
		</my-table>

		<el-dialog title="申请数据访问" :visible.sync="dialogFormVisibleUpdate" center　 width="35%">
			<el-form :model="formUpdate">
				<el-form-item label="选择机构:" label-width="120px">
					<el-select placeholder="机构" v-model="listQuery.custom_query_type" clearable>
						<el-option label="手机号" value="3"></el-option>
						<el-option label="检查编号" value="2"></el-option>
						<el-option label="患者编号" value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="允许对方访问:" label-width="120px">
					<el-checkbox v-model="checked"></el-checkbox>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleUpdate = false">取 消</el-button>
				<el-button type="primary" @click="updateMsg">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import myTable from 'components/myTable'
import { getMsgList } from '@/api/visit-mg'
export default {
	name: 'MsgManger',
	components: { myTable },
	data () {
		return {
			listQuery: {
				pagesize: 10,
				pageindex: 1,
				status: null,
				hospital_name: null,
			},
			colConfigs: [
				{
					type: 'index',
					label: '序号',
				},
				{ slot: 'opt' },
				{
					prop: 'hospital_name',
					label: '机构名称',
					sortable: false,
				},
				{ slot: 'status' },
				{
					prop: 'req_time',
					label: '申请时间',
					sortable: false,
				},
				{
					prop: 'end_date',
					label: '最后操作时间',
					sortable: false,
				},
			],
			tableData: [
				{
					hospital_name: '第一医院',
					status: 0,
					req_time: '2020-12-28 12:25',
					end_date: '2020-12-29 11:35',
				},
				{
					hospital_name: '第一1医院',
					status: 3,
					req_time: '2020-12-28 12:25',
					end_date: '2020-12-29 11:35',
				},
				{
					hospital_name: '第一1医院',
					status: 0,
					req_time: '2020-12-28 12:25',
					end_date: '2020-12-29 11:35',
				},
				{
					hospital_name: '第一医院1',
					status: 1,
					req_time: '2020-12-28 12:25',
					end_date: '2020-12-29 11:35',
				},
				{
					hospital_name: '第一11医院',
					status: 2,
					req_time: '2020-12-28 12:25',
					end_date: '2020-12-29 11:35',
				},
			],
			total: 0,
			listLoading: false,
			dialogFormVisibleUpdate: false,
			activeName: 'first',
		}
	},
	computed: {},
	created () { },
	mounted () {
		// this.getList()
	},
	methods: {
		getList ( val ) {

      /*
       * h获取任务统计
       * TODO
       */
			delete this.listQuery.timeVal
			const params = Object.assign( this.listQuery, val )
			console.log( params )
			getMsgList( params ).then( res => {
				if ( res.code === 0 ) {
					this.tableData = res.data.listQuery
					this.total = res.data.total
				}
			} )
		},
		handleRefresh () {
			this.getList()
		},
		handleReset ( searchForm ) {
			// 表单重置
			this.$nextTick( () => {
				this.$refs.searchForm.resetFields()
			} )
		},
		handleClick () {
			console.log( this.activeName )
			if ( this.activeName === 'first' ) {
				// 我的申请
			} else {
				// 我的授权
			}
		},
	},
}
</script>

<style scoped lang="less">
.container {
	padding: 0 10px;
	.btns {
		margin-bottom: 20px;
	}
	.el-input__inner {
		width: 13.7vw;
	}
}
</style>
